<%--
  Created by IntelliJ IDEA.
  User: 柳胜酉
  Date: 2023/4/21
  Time: 19:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>管理员添加用户页面</title>
    <link href="${pageContext.request.contextPath}/statics/style/css/Site.css" rel="stylesheet" type="text/css"/>
    <link href="${pageContext.request.contextPath}/statics/style/css/zy.layout.css" rel="stylesheet"/>
    <link href="${pageContext.request.contextPath}/statics/style/css/zy.form.css" rel="stylesheet"/>
    <link href="${pageContext.request.contextPath}/statics/style/css/add.css" rel="stylesheet"/>
    <link href="${pageContext.request.contextPath}/statics/style/css/zy.menu.css" rel="stylesheet"/>
    <link href="${pageContext.request.contextPath}/statics/style/css/zy.all.css" rel="stylesheet"/>
    <link href="${pageContext.request.contextPath}/statics/style/css/amazeui.min.css" rel="stylesheet"/>
    <link href="${pageContext.request.contextPath}/statics/style/css/admin.css" rel="stylesheet"/>
</head>
<script src="${pageContext.request.contextPath}/statics/scripts/jquery-3.6.1.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/statics/scripts/Jqueryplugs.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/statics/scripts/_layout.js" type="text/javascript"></script>
<body style="background: #F8F8F8">
<div style="position: absolute; left: 180px; right: 10px;">
    <%--                <iframe src="#" scrolling="no" width="100%" height="1200" name="right" border="none"></iframe>--%>
    <div class="dvcontent">
        <div>
            <div class="tabs">
                <div class="hd">
                    <ul>
                        <li class="on" style="box-sizing: initial;-webkit-box-sizing: initial;">
                            <input type="button" id="btn_add" value="确认新增">
                        </li>
                    </ul>
                </div>
                <div class="bd">
                    <ul style="display: block;padding: 20px;">
                        <li>
                            <!--分页显示角色信息 start-->
                            <div id="dv1">
                                <table class="table" id="tbRecord">
                                    <thead>
                                    <th>姓名</th>
                                    <th>密码</th>
                                    <th>角色</th>
                                    <th>性别</th>
                                    <th>电话</th>
                                    <th>生日</th>
                                    <th>增加</th>
                                    <th>移除</th>
                                    </thead>
                                    <tbody id="data">
                                    <tr>
                                        <td>
                                            <label>
                                                <input type="text" name="user_name" id="user_name">
                                            </label>
                                        </td>
                                        <td><label>
                                            <input type="text" name="password" id="password">
                                        </label></td>
                                        <td><label>
                                            <select name="role" class="role">
                                                <!-- <option value="0">管理员</option> -->
                                                <option value="1" selected>采购员</option>
                                                <option value="2">销售员</option>
                                            </select>
                                        </label></td>
                                        <td><label>
                                            <select name="sex" class="sex">
                                                <option value="0" selected>女</option>
                                                <option value="1">男</option>
                                            </select>
                                        </label></td>
                                        <td><label>
                                            <input type="text" name="phone" id="phone">
                                        </label></td>
                                        <td><label>
                                            <input type="date" name="birth" class="birth">
                                        </label></td>
                                        <td><input type="button" value="+" onclick="addElement(this);"></td>
                                        <td><input type="button" value="-" onclick="delElement(this)"></td>

                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="copyrights" id="copyrights">
            &copy; 2023 madballpad All rights reserved. <a
                href="tencent://Message/?Uin=842294358&websiteName=www.oicqzone.com&Menu=yes" title="版权信息">
            联系管理员</a>
        </div>
    </div>
</body>
<script type="text/javascript">
    //批量添加
    $("#btn_add").click(function () {
        let data = [];
        //循环tbody里面所有的tr，并取出每行相对的值,填充到数组中
        $("#data tr").each(function (index, obj) {
            data.push({
                user_name: $("input[name='user_name']", obj).val(),
                password: $("input[name='password']", obj).val(),
                phone: $("input[name='phone']", obj).val(),
                sex: $("select[name='sex'] option:selected", obj).val(),
                birth: $("input[name='birth']", obj).val(),
                role: $("select[name='role'] option:selected", obj).val(),
            })
        })
        //发起post请求
        $.ajax({
            url: "${pageContext.request.contextPath}/doAjaxRegisterInBatches",
            type: "post",
            //定义发送请求的数据格式为JSON字符串
            contentType: "application/json;charset=UTF-8",
            data: JSON.stringify(data),//将对象转为字符
            dataType: "json",
            success: function (text) {
                alert(text.msg);
            }
        });

    })

    //复制tr节点的内容
    function addElement(x) {
        $(x).parents("tr").clone().appendTo($("#data"));
    }

    //移除tr节点
    function delElement(x) {
        $(x).parents("tr").remove();
    }
</script>
</html>
